<!--
 * @Author: Chuckie
 * @Email: chuckie@aliyun.com
 * @Date: 2022-11-10 14:35:49
 * @LastEditTime: 2023-06-05 16:40:25
 * @Description: 
 * @FilePath: /base-web/src/views/system/config/list.vue
 *  
-->
<template>
  <div class="app-container scroll-y">
    <!--操作-->
    <div class="page-filter rowSS">
      <!--条件搜索-->
      <el-form ref="refsearchForm" :inline="true" class="demo-searchForm">
        <el-form-item :label="$t('common.search.keywords')">
          <el-input
            v-model="state.filter.keyword"
            :disabled="state.table.loading"
            :placeholder="$t('common.search.placeholder.input')"
          />
        </el-form-item>
      </el-form>

      <!--查询按钮-->
      <el-button type="primary" :disabled="state.table.loading" @click="onSelect">
        <el-icon style="vertical-align: middle">
          <Search />
        </el-icon>
        <span style="vertical-align: middle">{{ $t('common.search.search') }}</span>
      </el-button>
      <el-popconfirm :title="$t('common.message.sure')" @confirm="onRemoves">
        <template #reference>
          <el-button type="danger" :disabled="!multipleSelection.length">
            <el-icon style="vertical-align: middle">
              <Delete />
            </el-icon>
            <span style="vertical-align: middle">{{ $t('common.search.batchDelete') }}</span>
          </el-button>
        </template>
      </el-popconfirm>
      <el-button type="primary" :disabled="state.table.loading" @click="router.push('/system/config/detail')">
        <el-icon style="vertical-align: middle">
          <Plus />
        </el-icon>
        <span style="vertical-align: middle">{{ $t('common.search.add') }}</span>
      </el-button>
    </div>

    <!--数据-->
    <div id="print-box" class="page-data">
      <el-table
        ref="multipleTableRef"
        v-loading="state.table.loading"
        :data="state.table.dataSource"
        :border="true"
        stripe
        table-layout="auto"
        @selection-change="onSelectionChange"
      >
        <el-table-column type="selection" width="36" align="center" fixed />
        <el-table-column type="index" width="50" :label="$t('common.table.serialNumber')" align="center" fixed />
        <el-table-column :label="$t('systemConfig.table.name')" property="name" />
        <el-table-column :label="$t('systemConfig.table.code')" property="code" />
        <el-table-column :label="$t('systemConfig.table.type')" property="type">
          <template #default="{ row }">
            <span>{{ row.type === 'TEXT' ? '文本' : '图片' }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('systemConfig.table.value')" property="value">
          <template #default="{ row }">
            <span v-if="row.type === 'TEXT'">{{ row.value }}</span>
            <el-image v-if="row.type === 'IMAGE'" style="width: 100px; height: 100px" :src="row.value" />
          </template>
        </el-table-column>

        <el-table-column fixed="right" :label="$t('common.table.operation.operation')" width="150">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="router.push(`/system/config/detail/${scope.row.id}`)">
              {{ $t('common.table.operation.edit') }}
            </el-button>
            <el-popconfirm :title="$t('common.message.sure')" @confirm="onRemove([scope.row.id])">
              <template #reference>
                <el-button link type="danger" size="small">{{ $t('common.table.operation.delete') }}</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-pagination">
      <el-pagination
        v-model:currentPage="state.pagination.pageNum"
        v-model:page-size="state.pagination.pageSize"
        :page-sizes="[20, 50, 100]"
        small="small"
        :disabled="state.table.loading"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.pagination.total"
        @current-change="onSelect"
        @size-change="onSelect"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { ElTable } from 'element-plus'
import { Search, Delete, Plus } from '@element-plus/icons-vue'
import { Config, select, remove } from './api/config'

const { proxy }: any = getCurrentInstance()
const router = useRouter()

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<Config[]>([])

const state = reactive({
  filter: {
    keyword: null
  },
  table: {
    loading: true,
    dataSource: [] as Config[]
  },
  pagination: {
    pageNum: 1,
    pageSize: 20,
    total: 0
  }
})

const onSelectionChange = (records: Config[]) => {
  multipleSelection.value = records
}

const onSelect = async () => {
  state.table.loading = true
  const data = await select({ pageNum: state.pagination.pageNum, pageSize: state.pagination.pageSize, ...state.filter })
  state.table.dataSource = data.data.items
  state.pagination.total = data.data.total
  state.table.loading = false
}

const onRemoves = async () => {
  // onRemove(multipleSelection.value.map((item: Config) => item.id || ''))
}

const onRemove = async (ids: Array<string>) => {
  const data = await remove(ids)
  proxy.$message({ message: data.message, type: data.code === 20000 ? 'success' : 'error' })
  onSelect()
}

onMounted(() => {
  onSelect()
})
</script>
